<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>composition API-Provide,inject,模板Ref</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  
  const app = Vue.createApp({
    template: `
      <child ></child>
    `,
		setup(props,context) {	
			const {provide, ref,readonly} = Vue
			// provide 多层传递
			// provide('name','dell')
			const name = ref('dell')
			provide('name', readonly(name)) //不允许修改的值
			provide('changeName',(value)=>{
				name.value = value
			})
			return {
				
			}
		}
  });
	app.component('child',{
		setup(){
			const {inject} = Vue
			// 如果父组件不传name， 那这个参数值会是默认参数

			const name = inject('name','hello')

			//子组件
			const changeName = inject('changeName')
			const handleClick = () =>{
				 //name.value= 'lee'// 不推荐 不符合单项数据流指责
				changeName('lee')
			}
			return {
				name,handleClick
			}
		},
		template:'<div @click="handleClick">{{name}}</div>'
	})
  const vm = app.mount('#root');
</script>
</html>